<template>
	<view class="responseRecord">
		<view class="responseRecord-title">
			<u-tabs height="90" :list="responseList" :is-scroll="false" :current="responseCurrent"
				@change="responseChange"></u-tabs>
		</view>
		<view class="responseRecord-content">
			<view v-if="responseRecordList.length > 0">
				<view class="ff-bg-fff ff-margin-12 ff-padding-12 ff-line-height-1-3 ff-border-radius-10"
					v-for="(item, index) of responseRecordList" :key="index" @click="projectDetailsClick(item)">
					<view class="ff-flex-between ff-align-items-one ff-margin-bottom-5">
						<view class="ff-font-16 ff-font-weight-600 ff-width-250">{{ item.testName }}</view>
						<!-- 状态(1:未接受（已响应） 2:已接受 （响应成功） 3:已失效 ) -->
						<view class="ff-font-13 fraction1 ff-color-fff" v-if="item.status == 1">已响应</view>
						<view class="ff-font-13 fraction2 ff-color-fff" v-if="item.status == 2">响应成功</view>
						<view class="ff-font-13 fraction3 ff-color-fff" v-if="item.status == 3">已失效</view>
					</view>
					<view class="ff-color-5C5F65 ff-font-13 ff-margin-bottom-4">需求方：{{ item.companyName }}</view>
					<view class="ff-color-5C5F65 ff-font-13 ff-margin-bottom-10 ff-ellipsis-1">
						项目地址：距离我{{ (item.nearest / 1000).toFixed(2) }}km | {{ item.testAddr }}</view>
					<view
						class="responseRecord-content-box ff-border-radius-10 ff-padding-10 ff-color-blue ff-flex-between ff-align-items-one">
						<view class="ff-font-13">
							<view class="ff-margin-bottom-5">响 应 人：{{ item.createrName }}</view>
							<view class="">响应时间：{{ item.created.substr(0, item.created.length - 3) }}</view>
						</view>
						<view class="ff-font-13">
							<view
								class="ff-margin-bottom-3 ff-color-E7624B ff-text-center ff-font-weight-600 ff-font-22">
								{{ item.price }}
							</view>
							<view class="ff-color-BCBFCC">响应报价/元</view>
						</view>
					</view>
				</view>
				<u-divider v-if="noData" border-color="#909399" height="120" color="#909399"
					bg-color="#f5f5f5">没有更多了</u-divider>
			</view>
			<f-noData v-else></f-noData>
		</view>
		<!-- 组件区 -->
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
		<u-back-top :scrollTop="scrollTopList.scrollTop" top="200" mode="circle" :iconStyle="scrollTopList.iconStyle"
			:customStyle="scrollTopList.customstyle"></u-back-top>
		<!-- 未获取到定位示弹框 -->
		<u-modal v-model="locationModal" title="温馨提示" :content-style="{ 'line-height': '1.5' }"
			content="当前位置获取失败，请您开启GPS定位权限后再试！" />
		<u-modal v-model="tipsModal" title="温馨提示" :content-style="{ 'line-height': '1.5' }"
			content="项目已失效，无法查看，社会单位已选择其他服务机构。" />
	</view>
</template>

<script>
	export default {
		name: 'responseRecord',
		data() {
			return {
				// 状态(1:未接受（已响应） 2:已接受 （响应成功） 3:已失效 )
				responseList: [{
					name: '已响应'
				}, {
					name: '响应成功'
				}, {
					name: '已失效'
				}],
				responseCurrent: 0,
				locationModal: false, // 定位弹窗显/隐
				tipsModal: false, // 已失效的弹窗
				// 返回顶部组件参数
				scrollTopList: {
					scrollTop: 0,
					iconStyle: {
						fontSize: '32rpx',
						color: '#FFFFFF'
					},
					customstyle: {
						background: '#3B83FE'
					}
				},
				responseRecordList: [], // 响应列表
				noData: false, // 没有更多数据了
				params: {
					longitude: '',
					latitude: '',
					statuses: [1], // 状态(1:未接受（已响应） 2:已接受 （响应成功） 3:已失效 )
					current: 1,
					size: 10
				}
			};
		},
		onPageScroll(e) {
			this.scrollTopList.scrollTop = e.scrollTop;
		},
		onLoad(e) {
			let that = this;
			// 获取经纬度
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					// console.log('当前位置的经度-----：', res);
					that.params.latitude = res.latitude;
					that.params.longitude = res.longitude;
					that.getResponseRecordList(); // 获取响应记录列表数据
				},
				fail() {
					that.locationModal = true;
				}
			});
		},
		// 上拉加载
		onReachBottom() {
			this.params.current++;
			this.getResponseRecordList(); // 获取响应记录列表数据
		},
		// 下拉加载
		onPullDownRefresh() {
			let that = this;
			that.params.current = 1;
			that.getResponseRecordList(); // 获取响应记录列表数据
			setTimeout(() => {
				that.$refs.uToast.show({
					title: '刷新成功',
					type: 'success'
				});
				uni.stopPullDownRefresh(); // 停止刷新
			}, 100);
		},
		methods: {
			responseChange(index) {
				this.responseCurrent = index;
				if (index == 0) {
					this.params.current = 1;
					this.params.statuses = [1]
					this.getResponseRecordList(); // 获取响应记录列表数据
					return
				}
				if (index == 1) {
					this.params.current = 1;
					this.params.statuses = [2]
					this.getResponseRecordList(); // 获取响应记录列表数据
					return
				}
				if (index == 2) {
					this.params.current = 1;
					this.params.statuses = [3]
					this.getResponseRecordList(); // 获取响应记录列表数据
					return
				}
			},
			// 获取响应记录列表数据
			async getResponseRecordList() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.post({
					url: '/bsTestProjectInfo/org/project/response/page',
					data: this.params
				});
				// console.log('获取响应记录列表数据-------', data);
				if (data.code == 200) {
					const infoList = data.data.records;
					if (infoList.length == 0 && this.params.current == 1) {
						// console.log('首次加载没数据');
						this.noData = false;
						this.responseRecordList = [];
					} else if (infoList.length < 4 && this.params.current == 1) {
						// console.log('首次加载有数据，但少于4条');
						this.noData = true;
						this.responseRecordList = infoList;
					} else if (infoList.length !== 0 && this.params.current == 1) {
						// console.log('首次加载有数据');
						this.noData = false;
						this.responseRecordList = infoList;
					} else if (infoList.length !== 0 && this.params.current > 1) {
						// console.log('上拉加载更多数据');
						this.noData = false;
						this.responseRecordList = this.responseRecordList.concat(infoList);
					} else if (infoList.length == 0 && this.params.current > 1) {
						// console.log('上拉加载没有更多数据了');
						this.noData = true;
					}
				}
				this.$refs.loading.closeLoading(); // 关闭loading动画
			},
			// 跳转到项目详情
			projectDetailsClick(item) {
				if (item.status == 1) {
					this.$pageJump.navigateTo('/pages/detection/common/square/components/demandDetails?id=' +
						item.testId);
					return;
				}
				if (item.status == 2) {
					this.$pageJump.navigateTo(
						'/pages/detection/mechanism/home/components/details/projectMaintenanceRecord?id=' + item
						.testId);
					return;
				}
				if (item.status == 3) {
					this.tipsModal = true;
					return;
				}
			}
		},
		onShareAppMessage() {
			return {
				title: '分享小程序给朋友',
				path: '/pages/homePage/Home'
			};
		}
	};
</script>

<style lang="scss" scoped>
	.responseRecord {
		.ff-width-250 {
			width: 470rpx;
		}

		&-title {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 999;
		}

		&-content {
			margin-top: 114rpx;

			&-box {
				background-color: #f3f8fe;

				.ff-color-E7624B {
					color: #e7624b;
				}
			}
		}

		.fraction1 {
			font-size: 26rpx;
			background-color: #3178ff;
			padding: 12rpx 22rpx;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
		}

		.fraction2 {
			font-size: 26rpx;
			background-color: #ff6f00;
			padding: 12rpx 22rpx;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
		}

		.fraction3 {
			font-size: 26rpx;
			background-color: #b5bbc8;
			padding: 12rpx 22rpx;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
		}
	}
</style>